<template>
  <div class="page-container">
    <el-card class="box-card">

      <el-row style="margin-bottom: 5px">
        <el-input v-model="params.name" placeholder="请输入名称" style="width: 160px;height: auto;" size="small" clearable @keydown.enter.native="getList" @input="getList" @clear="getList">
          <template #suffix>
            <el-icon :size="15" color="var(--el-color-primary)">
              <ele-Search/>
            </el-icon>
          </template>
        </el-input>
        <el-button size="small" @click="onReset" icon="ele-Refresh" style="margin: 0 10px 0 20px">重置</el-button>
        <el-button type="primary" size="small" @click="openDialog(null)" icon="ele-CirclePlus">新建分类</el-button>
      </el-row>

      <el-tabs v-model="params.type" @tab-change="getList">
        <el-tab-pane label="收入类别" :name="0"/>
        <el-tab-pane label="支出类别" :name="1"/>
      </el-tabs>

      <div class="table-box">
        <el-table :data="list" size="small" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}">
          <el-table-column prop="name" label="名称"/>
          <el-table-column prop="state" label="状态">
            <template #default="{row}">
              <el-switch size="small" v-model="row.state" :active-value="1" :inactive-value="0" :active-text="row.state ? '显示' : '隐藏'" @change="changeState(row)"/>
            </template>
          </el-table-column>
          <el-table-column prop="sort" label="排序"/>
          <el-table-column prop="creator" label="创建人"/>
          <el-table-column prop="createTime" label="创建日期"/>
          <el-table-column label="操作" fixed="right" width="240">
            <template #default="{row}">
              <el-button type="primary" link size="small" @click="openDialog(row)" icon="ele-Edit">编辑</el-button>
              <el-button type="primary" link size="small" @click="createSub(row)" v-if="row.pid == 0" icon="ele-CirclePlus">添加子类</el-button>
              <el-button type="danger" link size="small" @click="handleRemove(row)" icon="ele-Delete">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <create-classify v-model:dialogDrawer="dialogFormVisible" :default-form="form" @onDetailSubmit="detailSubmit"/>

  </div>
</template>

<script>
import {onMounted, reactive, toRefs} from 'vue'
import CreateClassify from '../component/CreateClassify.vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import capitalTypeApi from '/@/api/money/capitalType'

export default {
  name: 'TypeManage',
  components: {
    CreateClassify
  },
  setup() {
    const state = reactive({
      dialogFormVisible: false,
      params: {
        name: null,
        type: 0
      },
      form: {
        id: null,
        pid: null,
        name: null,
        type: 0,  // 0收入, 1支出
        state: 1
      },
      list: []
    })
    // 获取数据
    const getList = () => capitalTypeApi.getTreeData(state.params).then(res => state.list = res.data).catch(e => console.log(e))
    // 删除
    const handleRemove = (item) => {
      ElMessageBox.confirm('确定删除分类：' + item.name + ' ？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        buttonSize: 'small',
        type: 'warning'
      }).then(() => {
        capitalTypeApi.remove(item).then(res => {
          if (res.data) {
            getList()
            ElMessage.success('删除成功')
          }
        }).catch(e => console.log(e))
      })
    }
    //添加子类
    const createSub = (item) => {
      state.form = {
        id: null,
        pid: item.id,
        name: null,
        state: 1,
        sort: 0,
        type: item.type
      }
      state.dialogFormVisible = true
    }
    // 修改显示状态
    const changeState = (item) => {
      capitalTypeApi.edit({
        id: item.id,
        state: item.state
      }).then(res => {
        if (res.data) {
          ElMessage.success('修改成功！')
        }
      }).catch(e => console.log(e))
    }
    //默认提交回调
    const detailSubmit = () => {
      getList()
      state.dialogFormVisible = false
    }
    //重置
    const onReset = () => {
      state.params = {
        type: state.params.type,
        name: null
      }
      getList()
    }
    // 新增/编辑
    const openDialog = (item) => {
      if (item && item.id) {
        state.form = JSON.parse(JSON.stringify(item))
      } else {
        state.form = {
          id: null,
          pid: null,
          name: null,
          state: 1,
          type: state.params.type
        }
      }
      state.dialogFormVisible = true
    }

    onMounted(() => getList())

    return {
      ...toRefs(state),
      CreateClassify,
      ElMessage,
      ElMessageBox,
      getList,
      handleRemove,
      changeState,
      createSub,
      onReset,
      openDialog,
      detailSubmit

    }
  }
}
</script>

<style lang="scss" scoped>
.table-box {
  background: var(--next-color-white);

  :deep(.el-table__header-wrapper .el-table__cell) {
    background: var(--el-color-primary-light-9);
    color: var(--next-bg-menuBar-light-1);
  }
}
</style>
